import { Button, Form, Input, message, Table,Tooltip } from "antd";
import { Key, useEffect, useState, } from "react";
import { useNavigate } from "react-router-dom";
import {
  SearchOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons";

import type { hosRecordstype, hosReturnItemType } from "@/api/hospital/model/hospitalSetType";

import style from "./index.module.css";

import { initHosRequest, deleteOneRequest, batchDeleteRequest } from "@/api/hospital/hospitalSet";


export default function HospitalSet() {
  //定义加载状态
  const [isloading,setIsloading] = useState(false)
  //编程式路由跳转
  const navigate = useNavigate()
  //定义列表填充数据
  const [records, setRecords] = useState<hosRecordstype>([]);
  //定义数据总条数
  const [total, setTotal] = useState(0);
  //定义当前页码
  const [current, seCurrent] = useState(1);
  //定义页码条数
  const [pageSize, setPageSize] = useState(5);
  //定义查询参数
  const [searchParams, setSearchParams] = useState({})
  //定义重新加载页面状态
  const [reload, setReload] = useState(true)
  //定义批量删除请求的参数
  const [batchParam, setBatchParam] = useState<Key[]>([])
  
  
  //初始化获取医院设置列表
  useEffect(() => {

    const inithospitalSet = async () => {
      setIsloading(true)
      const result = await initHosRequest({
        page: current,
        limit: pageSize,
        ...searchParams
      });
      //设置列表数据
      setRecords(result.records);
      //设置数据总数
      setTotal(result.total);
      setIsloading(false)

    };
    inithospitalSet();

  }, [current, pageSize, searchParams, reload]);




  //页码改变回调
  const pageChangeHandle = (current: number, pageSize: number) => {
    //设置当前页
    seCurrent(current);
    //设置每页条数
    setPageSize(pageSize);
  };

  //查询医院参数的回调
  const searchParamsHandle = (finish: {}) => {
    //设置查询参数
    setSearchParams(finish)
  };

  //点击添加跳转路由回调
  const navigateHandle = () => {
    navigate("/syt/hospital/addhospital")
  }

  //删除单个数据回调
  const deleteOneHandle = (id: number) => {
    return () => {
      const hospitalDelete = async () => {
        await deleteOneRequest(id)
        //删除后重新加载页面
        setReload(!reload)
        message.success('删除成功')
      }
      hospitalDelete()
    }
  }

  //批量删除改变选中状态回调
  const changeCheck = (ids: Key[]) => {
    //设置批量删除参数状态
    setBatchParam(ids)
  }

  //批量删除回调
  const deleteAllhandle = () => {
    const deleteAll = async () => {
      await batchDeleteRequest(batchParam)
      //删除后重新加载页面
      setReload(!reload)
      //将参数清空
      setBatchParam([])
      message.success('删除成功')
    }
    deleteAll()
  }





  const columns = [
    {
      title: "序号",
      dataIndex: "name",
      width: 60,
      render: (_: any, __: any, index: number) => index + 1,
    },
    {
      title: "医院名称",
      dataIndex: "hosname",
    },
    {
      title: "医院编号",
      dataIndex: "hoscode",
    },
    {
      title: "api路径",
      dataIndex: "apiUrl",
      width: 200,
    },
    {
      title: "签名",
      dataIndex: "signKey",
      width: 300,
    },
    {
      title: "联系人姓名",
      dataIndex: "contactsName",
    },
    {
      title: "联系人手机",
      dataIndex: "contactsPhone",
    },
    {
      title: "操作",
      fixed: "right" as "right",
      render: (_: any, data: hosReturnItemType) => {
        const { id } = data
        return (
          <div>
            <Tooltip title={"修改"}>
            <Button
              type="primary"
              icon={<EditOutlined />}
              className={style.mr}
              onClick={() => { navigate(`/syt/hospital/updatehospital/${id}`) }}
            ></Button>
            </Tooltip>
            <Tooltip title={"删除"}>
            <Button
              type="primary"
              danger
              icon={<DeleteOutlined />}
              onClick={deleteOneHandle(id)}
            ></Button>
            </Tooltip>
          </div>
        );
      },
    },
  ];

  return (
    <div className={style.outer}>
      <Form
        onFinish={searchParamsHandle}
        name="basic"
        wrapperCol={{
          span: 24,
        }}
        layout="inline"
      >
        <Form.Item name="hosname">
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item name="hoscode">
          <Input placeholder="医院编号" />
        </Form.Item>

        <Form.Item>
          <Button
            icon={<SearchOutlined />}
            type="primary"
            htmlType="submit"
            className={style.mr}
          >
            查询
          </Button>
          <Button type="default" htmlType="reset">
            清空
          </Button>
        </Form.Item>
      </Form>
      <div className={style.mt}>
        <Button type="primary" className={style.mr} onClick={navigateHandle}>
          添加
        </Button>
        <Button 
        type="primary"
        disabled={batchParam.length?false:true} 
        onClick={deleteAllhandle}
        danger
        >批量删除</Button>
      </div>
      <Table
        loading={isloading}
        className={style.mt}
        columns={columns}
        dataSource={records}
        rowKey="id"
        scroll={{ x: 1300 }}
        pagination={{
          current,
          pageSize,
          pageSizeOptions: [5, 8, 10],
          showSizeChanger: true,
          total,
          showTotal: (total) => `共${total}条数据`,
          onChange: (current, pageSize) => {
            pageChangeHandle(current, pageSize);
          },
        }}
        rowSelection={{
          onChange: (ids) => { changeCheck(ids) }
        }}
      />
    </div>
  );
}
